<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="card-header clearfix">
        <h5 class="title pull-left">用户信息</h5>
        <el-button
          type="text"
          icon="el-icon-edit"
          size="small"
          class="btn pull-right"
          @click="toUserEdit"
        >编辑</el-button>
      </div>
      <div class="card-wrapper">
        <el-row>
          <el-col :span="12"><strong>姓名：</strong>{{ renderData.name }} <svg-icon v-if="isVIP" icon-class="vip" class="text-warning" /></el-col>
          <el-col :span="6">
            <strong>内部用户：</strong>
            <i v-if="renderData.isinterior === 1" class="el-icon-check text-success" />
            <i v-else class="el-icon-close text-warning" />
          </el-col>
          <el-col :span="6">
            <strong>Global用户：</strong>
            <i v-if="renderData.isGlobal === 1" class="el-icon-check text-success" />
            <i v-else class="el-icon-close text-warning" />
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12">
            <strong>VeevaId：</strong>
            <span
              v-for="(item, index) in renderData.veevaList"
              :key="index"
            >{{ item.veeva_id }}<el-divider v-if="index !== renderData.veevaList.length - 1" direction="vertical" /></span>
          </el-col>
          <el-col :span="12">
            <strong>VeevaCode：</strong>
            <span
              v-for="(item, index) in renderData.veevaList"
              :key="index"
            >{{ item.veeva_code }}<el-divider v-if="index !== renderData.veevaList.length - 1" direction="vertical" /></span>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12"><strong>Mrid：</strong>{{ renderData.mrid }}</el-col>
          <el-col :span="12"><strong>MrUserId：</strong>{{ renderData.mrUserId }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12"><strong>手机号码：</strong>{{ renderData.tel }}</el-col>
          <el-col :span="12"><strong>邮箱：</strong><a :href="`mailto:${renderData.email}`" target="_blank">{{ renderData.email }}</a></el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12">
            <strong>状态：</strong>
            <el-tag
              v-if="renderData.state === 1"
              effect="plain"
              type="info"
            >{{ renderData.statename }}</el-tag>
            <el-tag
              v-if="renderData.state === 2"
              effect="plain"
              type="warning"
            >{{ renderData.statename }}</el-tag>
            <el-tag
              v-if="renderData.state === 3"
              effect="plain"
              type="success"
            >{{ renderData.statename }}</el-tag>
            <el-tag
              v-if="renderData.state === 4"
              effect="plain"
              type="danger"
            >{{ renderData.statename }}</el-tag>
          </el-col>
          <el-col :span="12">
            <strong>用户类型：</strong>
            <el-tag
              v-if="!_.isEmpty(renderData.typename)"
              effect="plain"
              type="success"
            >{{ renderData.typename }}</el-tag>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12"><strong>省份：</strong>{{ renderData.provinceName }}</el-col>
          <el-col :span="12"><strong>城市：</strong>{{ renderData.cityName }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12"><strong>医院：</strong>{{ renderData.hospname }}</el-col>
          <el-col :span="12"><strong>科室：</strong>{{ renderData.adfname }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12">
            <strong>所属群组：</strong>
            <el-tag
              v-if="!_.isEmpty(renderData.clusterName)"
              effect="plain"
            >{{ renderData.clusterName }}</el-tag>
          </el-col>
          <el-col :span="12"><strong>创建于：</strong>{{ renderData.createdtime | moment('YYYY-MM-DD HH:mm:ss') }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12">
            <strong>当前注册信息来源：</strong>
            <el-tag
              v-if="!_.isEmpty(renderData.sourcename)"
              effect="plain"
            >{{ renderData.sourcename }}</el-tag>
          </el-col>
          <el-col :span="12"><strong>QrCodeId：</strong>{{ renderData.qrCodeId }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12"><strong>注册时间：</strong>{{ renderData.registerTime }}</el-col>
          <el-col :span="12"><strong>同意协议时间：</strong>{{ renderData.ruleTime }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12">
            <strong>绑定产品：</strong>
            <el-tag v-if="!_.isEmpty(renderData.brandName)" effect="plain">{{ renderData.brandName }}</el-tag>
          </el-col>
          <el-col :span="12">
            <strong>标签：</strong>
            <el-tag
              v-for="(item, index) in renderData.label"
              :key="index"
              effect="plain"
              type="success"
            >{{ item.labelid }}</el-tag>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="24"><strong>备注：</strong>{{ renderData.notes }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-form label-position="top" label-width="100px" class="user-form">
            <el-col :span="24">
              <el-form-item label="相关操作：">
                <el-button
                  type="danger"
                  icon="el-icon-close"
                  size="small"
                  @click="unbindUser"
                >用户解绑</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </el-card>

    <el-card class="box-card mt40">
      <div slot="header" class="card-header clearfix">
        <h5 class="title pull-left">平台信息</h5>
      </div>

      <el-table
        :data="renderData.wechat"
        stripe
        fit
        highlight-current-row
      >
        <el-table-column label="ID" width="80" align="center">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="头像" width="100" align="center">
          <template slot-scope="scope">
            <avatar :img-width="40" :avatar-uri="scope.row.photo" :alt="scope.row.nickname" />
          </template>
        </el-table-column>
        <el-table-column label="昵称">
          <template slot-scope="scope">
            {{ scope.row.nickname }}
          </template>
        </el-table-column>
        <el-table-column label="OpenId">
          <template slot-scope="scope">
            {{ scope.row.openid }}
          </template>
        </el-table-column>
        <el-table-column label="关注" width="80" align="center">
          <template slot-scope="scope">
            <i v-if="scope.row.attention === 1" class="el-icon-check text-success" />
            <i v-else class="el-icon-close text-warning" />
          </template>
        </el-table-column>
        <el-table-column label="创建于" width="160" align="center">
          <template slot-scope="scope">
            {{ scope.row.setdate | moment('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  getUsersList,
  unbindUser
} from '@/api/users'
import Avatar from '@/components/Avatar'

export default {
  name: 'UserShow',
  components: {
    Avatar
  },
  data() {
    return {
      id: '',
      renderData: {},
      loading: false
    }
  },
  computed: {
    isVIP() {
      return this.renderData.level === 'vip' && (this.renderData.isinterior === 1 || this.renderData.isGlobal === 1)
    }
  },
  created() {
    const id = this.$route.params && this.$route.params.id
    this.id = id
    this.fetchData(id)
  },
  methods: {
    fetchData(id) {
      getUsersList({ id }).then(response => {
        const resData = response.data[0]
        // console.log(resData)
        this.renderData = resData
      }).catch(err => {
        console.log(err)
      })
    },
    toUserEdit() {
      this.$router.push(`/users/edit/${this.id}`)
    },
    unbindUser() {
      this.$confirm('该操作会永久清除用户信息，确认解绑该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        unbindUser({
          id: this.id
        }).then(response => {
          // console.log(response)
          this.$message({
            type: 'success',
            message: '解绑成功!'
          })
          this.$router.replace('/users/list?page=1')
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解绑'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 40px 140px;
}
</style>
